<template>
  <!-- 仓库 -->
  <FormItem label="仓库" name="consigneeWarehouseId">
    <Select
      v-model:value="formState.consigneeWarehouseId"
      placeholder="请选择仓库"
      @change="selectWareHouse"
    >
      <SelectOption v-for="item in consigneeWarehouseList" :key="item.id" :value="item.id">{{
        item.houseName
      }}</SelectOption>
    </Select>
  </FormItem>

  <FormItem label="出库要求">
    <Textarea v-model:value="formState.warehouseRemark" showCount :maxlength="100" :rows="5" />
  </FormItem>

  <FormItem label="是否加急">
    <RadioGroup v-model:value="formState.isUrgant">
      <Radio :value="0">正常</Radio>
      <Radio :value="1">加急</Radio>
    </RadioGroup>
  </FormItem>

  <FormItem label="是否生成送货单">
    <RadioGroup
      @change="
        (e) => {
          formState.isPrintDelivery = e.target.value;
        }
      "
      v-model:value="formState.isDelivery"
    >
      <Radio :value="0">不生成送货单</Radio>
      <Radio :value="1">生成送货单</Radio>
    </RadioGroup>
  </FormItem>

  <FormItem label="是否打印送货单">
    <RadioGroup disabled v-model:value="formState.isPrintDelivery">
      <Radio :value="0">不打印送货单</Radio>
      <Radio :value="1">打印送货单</Radio>
    </RadioGroup>
  </FormItem>

  <FormItem v-if="formState.shippingType !== 5" label="上传随车文件">
    <BasicUploadDragger
      :params="{
        label: props.queryParams!.fileLabel,
        batchId: props.queryParams!.batchId,
        configCode: 'eslogis_order',
      }"
      :fileLists="fileList"
    />
  </FormItem>
</template>
<script lang="ts" setup>
  import { onMounted, ref, reactive } from 'vue';
  import { getWhByMap } from '@/api/deliveryOrder';
  import { FormItem, Select, SelectOption, Textarea, RadioGroup, Radio } from 'ant-design-vue';
  import BasicUploadDragger from '@/components/UploadDragger/BasicUploadDragger.vue';
  import type { ConsigneeWarehouse, ConsigneeWarehouseInfo } from './types/types';

  onMounted(async () => {
    formState.value = props.queryParams as ConsigneeWarehouseInfo;
    // 仓库
    const consigneeWareRes = await getWhByMap({ current: 1, size: 100 });
    consigneeWarehouseList.value = consigneeWareRes.records;

    if (props.queryParams && props.queryParams.consigneeWarehouse) {
      consigneeWarehouseList.value.forEach((element) => {
        if (element.houseName === props.queryParams.consigneeWarehouse) {
          formState.value.consigneeWarehouseId = element.id;
        }
      });
    }

    // 如果匹配不到，就默认选中houseType=2(虚拟仓)的那一条
    if (!formState.value.consigneeWarehouseId) {
      for (let i = 0; i < consigneeWarehouseList.value.length; i++) {
        if (consigneeWarehouseList.value[i].houseType == 2) {
          formState.value.consigneeWarehouseId = consigneeWarehouseList.value[i].id;
          break;
        }
      }
      // consigneeWarehouseList.value.forEach((element) => {
      //   if (element.houseType == 2) {
      //     formState.value.consigneeWarehouseId = element.id;
      //   }
      // });
    }
  });

  const props = defineProps({
    queryParams: { type: Object },
  });

  const formState = ref({} as ConsigneeWarehouseInfo);

  // 仓库list
  const consigneeWarehouseList = ref<ConsigneeWarehouse[]>([]);

  const selectWareHouse = (e) => {
    consigneeWarehouseList.value.forEach((element) => {
      if (element.id === e) {
        formState.value.consigneeWarehouse = element.houseName;
      }
    });
  };

  // const params = ref({
  //   configCode: 'eslogis_order',
  //   label: props.queryParams!.fileLabel,
  //   batchId: props.queryParams!.batchId,
  // });
  const fileList = reactive([]);
</script>
<style>
  .ant-input-textarea-show-count::after {
    position: absolute;
    right: 10px;
    bottom: 0;
  }
</style>
